<template>
  <div class="plugin-develop-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🛠️ 插件开发工具</span>
          <div class="header-actions">
            <el-button @click="handleNewPlugin">
              <el-icon><Plus /></el-icon>
              新建插件
            </el-button>
            <el-button type="success" @click="handleImport">
              <el-icon><Upload /></el-icon>
              导入插件
            </el-button>
          </div>
        </div>
      </template>

      <!-- 我的插件列表 -->
      <el-table :data="myPlugins" border stripe>
        <el-table-column prop="name" label="插件名称" width="200" />
        <el-table-column prop="version" label="版本" width="100" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160" />
        <el-table-column label="操作" width="350" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="success" @click="handleTest(row)">测试</el-button>
            <el-button link type="warning" @click="handleBuild(row)">构建</el-button>
            <el-button link type="info" @click="handlePublish(row)">发布</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 插件编辑器对话框 -->
    <el-dialog v-model="editorDialogVisible" title="插件编辑器" width="90%" fullscreen>
      <el-container style="height: calc(100vh - 200px);">
        <!-- 左侧：文件树 -->
        <el-aside width="250px" style="border-right: 1px solid #dcdfe6;">
          <div class="file-tree">
            <h4>项目结构</h4>
            <el-tree
              :data="fileTree"
              :props="{ label: 'name', children: 'children' }"
              @node-click="handleFileClick"
            >
              <template #default="{ node, data }">
                <span class="tree-node">
                  <el-icon v-if="data.type === 'folder'"><Folder /></el-icon>
                  <el-icon v-else><Document /></el-icon>
                  <span>{{ node.label }}</span>
                </span>
              </template>
            </el-tree>
          </div>
        </el-aside>

        <!-- 中间：代码编辑器 -->
        <el-main>
          <div class="code-editor">
            <div class="editor-tabs">
              <el-tabs v-model="activeFile" type="card" closable @tab-remove="handleTabRemove">
                <el-tab-pane
                  v-for="file in openFiles"
                  :key="file.path"
                  :label="file.name"
                  :name="file.path"
                >
                  <div class="code-content">
                    <el-input
                      v-model="file.content"
                      type="textarea"
                      :rows="20"
                      placeholder="请输入代码..."
                    />
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="editor-toolbar">
              <el-button size="small" @click="handleFormat">
                <el-icon><EditPen /></el-icon>
                格式化
              </el-button>
              <el-button size="small" @click="handleSave">
                <el-icon><DocumentChecked /></el-icon>
                保存
              </el-button>
              <el-button size="small" type="primary" @click="handleRunTest">
                <el-icon><VideoPlay /></el-icon>
                运行测试
              </el-button>
            </div>
          </div>
        </el-main>

        <!-- 右侧：插件信息 -->
        <el-aside width="300px" style="border-left: 1px solid #dcdfe6; padding: 20px;">
          <div class="plugin-info-panel">
            <h4>插件信息</h4>
            <el-form label-width="80px" size="small">
              <el-form-item label="插件名称">
                <el-input v-model="pluginInfo.name" />
              </el-form-item>
              <el-form-item label="版本号">
                <el-input v-model="pluginInfo.version" />
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="pluginInfo.author" />
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="pluginInfo.description" type="textarea" :rows="3" />
              </el-form-item>
              <el-form-item label="分类">
                <el-select v-model="pluginInfo.category">
                  <el-option label="业务增强" value="business" />
                  <el-option label="数据分析" value="analytics" />
                  <el-option label="工具效率" value="tools" />
                  <el-option label="集成对接" value="integration" />
                </el-select>
              </el-form-item>
            </el-form>

            <h4 style="margin-top: 30px;">依赖项</h4>
            <div class="dependencies">
              <el-tag v-for="dep in pluginInfo.dependencies" :key="dep" size="small" closable style="margin: 5px;">
                {{ dep }}
              </el-tag>
              <el-button size="small" @click="handleAddDependency">
                <el-icon><Plus /></el-icon>
                添加
              </el-button>
            </div>

            <h4 style="margin-top: 30px;">API权限</h4>
            <el-checkbox-group v-model="pluginInfo.permissions" size="small">
              <el-checkbox label="read">读取数据</el-checkbox>
              <el-checkbox label="write">写入数据</el-checkbox>
              <el-checkbox label="delete">删除数据</el-checkbox>
              <el-checkbox label="admin">管理权限</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-aside>
      </el-container>
      <template #footer>
        <el-button @click="editorDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSavePlugin">保存插件</el-button>
        <el-button type="success" @click="handleBuildPlugin">构建发布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, markRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Upload, Refresh, Folder, Document, EditPen,
  DocumentChecked, VideoPlay, DataAnalysis, Tickets
} from '@element-plus/icons-vue'

const editorDialogVisible = ref(false)
const activeFile = ref('/src/index.js')

const myPlugins = ref([
  { id: 1, name: '我的第一个插件', version: '0.1.0', status: '开发中', updateTime: '2024-01-20 15:30' },
  { id: 2, name: '数据导出增强', version: '1.0.0', status: '已发布', updateTime: '2024-01-18 10:20' }
])

const fileTree = ref([
  {
    name: 'my-plugin',
    type: 'folder',
    children: [
      {
        name: 'src',
        type: 'folder',
        children: [
          { name: 'index.js', type: 'file', path: '/src/index.js' },
          { name: 'config.js', type: 'file', path: '/src/config.js' },
          { name: 'api.js', type: 'file', path: '/src/api.js' }
        ]
      },
      { name: 'package.json', type: 'file', path: '/package.json' },
      { name: 'README.md', type: 'file', path: '/README.md' }
    ]
  }
])

const openFiles = ref([
  {
    name: 'index.js',
    path: '/src/index.js',
    content: `// 插件入口文件
export default {
  name: 'my-plugin',
  version: '1.0.0',
  install(app) {
    // 插件安装逻辑
    console.log('插件已安装')
  },
  activate() {
    // 插件激活逻辑
    console.log('插件已激活')
  }
}`
  }
])

const pluginInfo = reactive({
  name: '我的插件',
  version: '1.0.0',
  author: '开发者',
  description: '这是一个示例插件',
  category: 'tools',
  dependencies: ['vue', 'element-plus'],
  permissions: ['read', 'write']
})

const getStatusTag = (status) => {
  const map = { '开发中': 'warning', '测试中': 'info', '已发布': 'success' }
  return map[status] || 'info'
}

const handleNewPlugin = () => {
  editorDialogVisible.value = true
}

const handleImport = () => {
  ElMessage.info('导入插件功能')
}

const handleEdit = (row) => {
  editorDialogVisible.value = true
}

const handleTest = (row) => {
  ElMessage.success(`插件 "${row.name}" 测试通过`)
}

const handleBuild = (row) => {
  ElMessage.success(`插件 "${row.name}" 构建成功`)
}

const handlePublish = (row) => {
  ElMessage.success(`插件 "${row.name}" 发布成功`)
}

const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除插件 "${row.name}" 吗？`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    ElMessage.success('插件删除成功')
  })
}

const handleFileClick = (data) => {
  if (data.type === 'file') {
    const exists = openFiles.value.find(f => f.path === data.path)
    if (!exists) {
      openFiles.value.push({
        name: data.name,
        path: data.path,
        content: '// ' + data.name
      })
    }
    activeFile.value = data.path
  }
}

const handleTabRemove = (path) => {
  const index = openFiles.value.findIndex(f => f.path === path)
  if (index !== -1) {
    openFiles.value.splice(index, 1)
  }
}

const handleFormat = () => {
  ElMessage.success('代码已格式化')
}

const handleSave = () => {
  ElMessage.success('文件已保存')
}

const handleRunTest = () => {
  ElMessage.success('测试运行成功')
}

const handleAddDependency = () => {
  ElMessageBox.prompt('请输入依赖包名称', '添加依赖', {
    confirmButtonText: '添加',
    cancelButtonText: '取消'
  }).then(({ value }) => {
    if (value) {
      pluginInfo.dependencies.push(value)
      ElMessage.success('依赖添加成功')
    }
  })
}

const handleSavePlugin = () => {
  ElMessage.success('插件保存成功')
}

const handleBuildPlugin = () => {
  ElMessage.success('插件构建并发布成功')
  editorDialogVisible.value = false
}
</script>

<style scoped>
.plugin-develop-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.file-tree {
  padding: 20px 10px;
}

.file-tree h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 5px;
}

.code-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor-tabs {
  flex: 1;
  overflow: auto;
}

.code-content {
  padding: 10px;
}

.editor-toolbar {
  padding: 10px;
  border-top: 1px solid #dcdfe6;
  display: flex;
  gap: 10px;
}

.plugin-info-panel h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

.dependencies {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
</style>

